<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>符号预览(生成精灵图和数据)</title>
    <script src="js/configData.js"></script>
    <script src="js/demo.js"></script>
    <link rel="stylesheet" href="css/demo.css">


</head>
<body id="body">
<div id="allSymbol"></div>
<div id="spriteInfo"></div>
</body>
</html>
<script>
</script>
<script>

    var loadEleSymbol = null
    var EleSymbol = null
    var symbolStyle = null

    //所有点符号的符号id
    let allPointId = []

    let offsetData = {
        100: [-0.8, 0],
        5410: [0, 0.8],
        2150010: [0, 0.8],
        4070010: [0, 0.4],
        4070011: [0, 0.4],
        4070012: [0, 0.4],
        4070013: [0, 0.4],
        4070014: [0, 0.4],
        4070015: [0, 0.4],
        84030070: [0, 0.4],
        84030071: [0, 0.4],
        84030072: [0, 0.4],

        9060010: [-1, 0],

        4130050: [0, 0.4],
        4130051: [0, 0.4],

        10010010: [0, 0.4],
        10010011: [0, 0.4],
        10010012: [0, 0.4],
        10010013: [0, 0.4],
        10010042: [0, 0.4],
        10010043: [0, 0.4],
        10010044: [0, 0.4],
        10010065: [0, 0.4],
        10010128: [0, 0.4],
        84340020:[0,-0.5],
        84340021:[0,-0.5]
    }

    /**
     * 绘制符号预览区
     */
    function render() {
        for (let symbolId in loadEleSymbol._symbolMap) {
            if (loadEleSymbol._symbolMap[symbolId] instanceof EleSymbol.PointSymbol) {
                allPointId.push(symbolId)
            } else if (loadEleSymbol._symbolMap[symbolId] instanceof EleSymbol.LineSymbol) {
                // symbolStyle = new EleSymbol.SymbolStyle(-1, 0, symbolLineScale);
                // loadEleSymbol.draw(context, symbolId, new EleSymbol.GeoPolyline([
                //     new EleSymbol.GeoPoint(0, innerRadius),
                //     new EleSymbol.GeoPoint(innerRadius * 2, innerRadius)
                // ]), symbolStyle);
            } else if (loadEleSymbol._symbolMap[symbolId] instanceof EleSymbol.FillSymbol) {
                // symbolStyle = new EleSymbol.SymbolStyle('#00000033', 0, symbolFillScale);
                // loadEleSymbol.draw(context, symbolId,
                //     new EleSymbol.GeoPolygon([
                //         new EleSymbol.GeoPoint(x - innerRadius, y - innerRadius),
                //         new EleSymbol.GeoPoint(x - innerRadius, y + innerRadius),
                //         new EleSymbol.GeoPoint(x + innerRadius, y + innerRadius),
                //         new EleSymbol.GeoPoint(x + innerRadius, y - innerRadius),
                //         new EleSymbol.GeoPoint(x - innerRadius, y - innerRadius)
                //     ]), symbolStyle);
            }
        }
        //创建一个完整的点符号预览雪碧图
        let canvasAll = document.createElement('canvas')
        let contextAll = canvasAll.getContext('2d')
        let iconRadius = 40
        let rowCount = 10
        //设置canvas大小
        canvasAll.width = iconRadius * 2 * 10
        canvasAll.height = iconRadius * 2 * Math.ceil(allPointId.length / rowCount)

        let symRow = 0, symColumn = 0
        let renderedCount = 0

        let infoJson = {
            imgSize: {width: canvasAll.width, height: canvasAll.width},
            iconInfos: {}
        }

        for (let i = 0; i < allPointId.length; i++) {
            let symId = allPointId[i]
            //颜色，大小
            symbolStyle = new EleSymbol.SymbolStyle(-1, 0, 16);
            symColumn = renderedCount % rowCount
            symRow = Math.floor(renderedCount / rowCount)
            let offset = offsetData[symId] || [0, 0]
            loadEleSymbol.draw(contextAll, symId, new EleSymbol.GeoPoint((symColumn * 2 + 1) * iconRadius + offset[0] * iconRadius, (symRow * 2 + 1) * iconRadius + offset[1] * iconRadius), symbolStyle);
            // 边框
            contextAll.strokeRect((symColumn * 2) * iconRadius, (symRow * 2) * iconRadius, iconRadius * 2, iconRadius * 2)
            // contextAll.rect()
            infoJson.iconInfos[symId] = {
                "width": iconRadius * 2,
                "height": iconRadius * 2,
                "x": (symColumn * 2) * iconRadius ,
                "y": (symRow * 2) * iconRadius,
                "pixelRatio": 1,
                "center_x": iconRadius,
                "center_y": iconRadius
                // offset: [(symColumn * 2) * iconRadius, (symRow * 2) * iconRadius],
                // size: [iconRadius * 2, iconRadius * 2]
            }
            renderedCount++
        }
        document.getElementById('allSymbol').append(canvasAll)
        // console.log('描述信息')
        // document.getElementById('spriteInfo').innerText = JSON.stringify(infoJson)
        // document.getElementById('spriteInfo').innerText = JSON.stringify(Object.keys(infoJson.iconInfos))
    }

    window.onload = () => {
        dynamicLoadJs(egisV2Url, () => {
            EleSymbol = egisV2.util.SymbolUtil
            loadEleSymbol = new egisV2.util.SymbolUtil.loadEleSymbol()
            //加载符号库文件
            loadEleSymbol.load('libs/allSym0607.sym').then(
                res => {
                    if (res) {
                        render()
                    }
                }
            )
        })

    }

</script>
